import React, { Component } from 'react';

// 组件生命周期-挂载阶段
// --- constructor
// 1. 初始化状态
// 2. 通过 bind 绑定 this
// 3. 创建 ref 
// ----getDerivedStateFromProps
// getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
// --- render 函数 一般时返回一段JSX
// !!! 注意 一般不要在render 函数中调用 setState 方法；即使要调用，也要由条件调用
// ---- componentDidMount 
// 1. 操作dom
// 2. 订阅数据、注册事件以及定时器等等
// 3. 发请求获取数据
class App extends Component {
  constructor(props){
    super(props);
    console.log("1. constructor")
    this.state = {
      msg:"(*^_^*)"
    }
    this.handleClick = this.handleClick.bind(this);
    this.inputRef = React.createRef();
  }
  static getDerivedStateFromProps(props,state){
    console.log("2.getDerivedStateFromProps");
    // return null;// 表示不做任何东西
    return {
      msg:"😀"
    }
  }
  handleClick(){
    console.log(this);// undefined => 需要通过 bind 绑定 handleClick函数this指向的
  }
  render() {
    console.log("3. 执行render函数");
    // !!! 不要在 render 函数调用 setState方法
    // this.setState({
    //   msg:"🐂"
    // })
    return (
      <div>
        <h1>{this.state.msg}</h1>
      </div>
    );
  }
  componentDidMount(){
    console.log("4. componentDidMount");
  }
}

export default App;
